<template>
  <!-- 支付弹框：支付宝、微信、余额 -->
  <uni-popup ref="popup" type="bottom">
    <view class="popup">
      <view class="popup-header">
        <view class="pay-title">支付方式</view>

        <!-- <uni-icons class="close" type="closeempty" size="18" @click="closePop"></uni-icons> -->
      </view>
      <view class="pay-item" @click="handlePay(0)" v-if="!noWechat">
        <image src="@/static/my/pay-icon-wechatpay.png" />
        <view class="title">微信</view>
        <view class="right">
          <image v-show="payIndex[0]" src="@/static/my/user-login-check-icon.png" />
          <image v-show="!payIndex[0]" src="@/static/my/user-login-check-icons.png" />
        </view>
      </view>
      <view class="pay-item" @click="handlePay(1)" v-if="!noAlipay">
        <image src="@/static/my/pay-icon-alipay.png" />
        <view class="title">支付宝</view>
        <view class="right">
          <image v-show="payIndex[1]" src="@/static/my/user-login-check-icon.png" />
          <image v-show="!payIndex[1]" src="@/static/my/user-login-check-icons.png" />
        </view>
      </view>
      <view class="pay-item" @click="handlePay(2)" v-if="!noBalance">
        <image src="@/static/my/pay-icon-balancepay.png" />
        <view class="title">余额</view>
        <view class="right">
          <image v-show="payIndex[2]" src="@/static/my/user-login-check-icon.png" />
          <image v-show="!payIndex[2]" src="@/static/my/user-login-check-icons.png" />
        </view>
      </view>
      <view class="submit" v-if="showPay" @click="pay">支付</view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { showToast, navigateTo } from '@/utils'

/**
 * @description 调用 <h-pay /> 组件的open方法，即可调起支付弹框
 * @props {Boolean} noWechat 是否禁用微信支付
 * @props {Boolean} noAlipay 是否禁用支付宝支付
 * @props {Boolean} noBalance 是否禁用余额支付
 * @exports open {Function} return {Promise} Promise 登录返回对象
 */

const popup = ref(null)
const payIndex = ref([true, false, false])
const payType = ref([
  {
    title: '微信支付',
    payType: 'wxpay',
    value: 1,
  },
  {
    title: '支付宝支付',
    payType: 'alipay',
    value: 2,
  },
  {
    title: '余额支付',
    payType: 'balance',
    value: 0,
  },
])
const props = defineProps({
  noWechat: {
    type: Boolean,
    default: false,
  },
  noAlipay: {
    type: Boolean,
    default: false,
  },
  noBalance: {
    type: Boolean,
    default: false,
  },
  showPay: {
    type: Boolean,
    default: false,
  },
})

defineExpose({
  open,
  closePop,
})

const emit = defineEmits(['change', 'pay'])

/**
 * 立即支付
 */
function pay() {
  emit('pay')
}
/**
 * 选择支付方式
 */
function handlePay(i) {
  payIndex.value = [false, false, false]
  payIndex.value[i] = true
  if (!props.showPay) {
    closePop()
  }
  emit('change', payType.value[i])
}

/**
 * open popup
 */
function open() {
  nextTick(() => {
    popup.value.open()
  })
}

/**
 * close popup
 */
function closePop() {
  popup.value.close()
}
</script>

<style lang="scss" scoped>
::v-deep .vue-ref {
  padding-bottom: 0 !important;
}

.popup {
  width: 750rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 0 0;
  font-family: PingFang SC, PingFang SC;
  padding: 0 54rpx 40rpx 54rpx;

  .popup-header {
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .pay-title {
      flex: 1;
      font-size: 32rpx;
      font-weight: 500;
      color: #000000;
    }

    .close {
      position: absolute;
      right: -15rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .pay-item {
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    font-size: 32rpx;
    font-weight: 500;
    color: #000000;

    & > image {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      background-color: #eee;
      margin-right: 20rpx;
    }

    .title {
      flex: 1;
      font-size: 32rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #000000;
      height: 100%;
      display: flex;
      align-items: center;
    }

    .right {
      margin-left: 20rpx;

      image {
        width: 40rpx;
        height: 40rpx;
        margin-left: 20rpx;
      }
    }
  }

  .submit {
    margin-top: 30rpx;
    width: 100%rpx;
    height: 75rpx;
    background: #ffb300;
    border-radius: 38rpx 38rpx 38rpx 38rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
  }
}
</style>
